<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="../../jquery-3.7.1.js"></script>

    
</head>
<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>

    <ul>
        <li>你好</li>
        <li>我好</li>
        <li>大家好</li>
    </ul>

    <ul>
        <li>好好学习，天天向上</li>
    </ul>
      
    <!-- 第三：使用 JQ -->
    <script>
       // 1.匹配其父元素下的第N个子元素或奇偶元素 
       // 注意：下标索引从 1 开始
       // $("ul li:nth-child(1)").css("color","red") ;
       // $("ul li:nth-child(even)").css("color","red") ;
       // $("ul li:nth-child(odd)").css("color","red") ;


       // 2.匹配第一个子元素
       // ':first' 只匹配一个元素，
       // 而 :first-child 将为每个父元素匹配一个子元素

       // $("li:first-child").css("color","red") ;
       // $("li:first").css("color","green") ;


       // 3.匹配最后一个子元素
       // $("li:last-child").css("color","red") ;
       // $("li:last").css("color","green") ;
        

       // 4.匹配只有一个子元素
       $("li:only-child").css("color","green") ;
    </script>
</body>
</html>